
<script lang="ts" setup>
import { computed, ref } from '@vue/reactivity';
import { PropType } from '@vue/runtime-core';

defineProps({
  title: {
    type: Object as PropType<TitleType>,
    required: true
  }
})


const count = ref(1)
const doubleCount = computed(() => count.value * 2)

const items = ref([] as TodoType[])
items.value.push({
  id: String(Math.random()),
  name: 'vue3',
  compledted: false
})

const todoName = ref('')
const newTodo = (todoName: string): TodoType => {
  return {
    id: String(Math.random()),
    name: todoName,
    compledted: false
  }
}
const addTodo = (todo: TodoType): void => {
  items.value.push(todo)
  todoName.value = ''
}

</script>
<template >
  <div class="comp">
    <h2 :style="{ 'color': title.color }">{{ title.name }}</h2>
    <p @click="$store.commit('add')">count: {{ count }}</p>
    <p>doubleCount: {{ doubleCount }}</p>
    <input type="text" v-model="todoName" @keydown.enter="addTodo(newTodo(todoName))" />
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<style scoped>
.comp {
  text-align: left;
}
</style>
